<template>
  <div class="pro2">
    <div style="margin-bottom: 10px;">
      <el-button v-show="!judgeStatus" type="primary" size="mini" @click="addPay">添加资费策略</el-button>
    </div>
    <span class="tariffList">已关联资费策略</span>
    <div class="app-table">
      <el-table :data="tariffListNew" border style="width: 100%">
        <el-table-column label="策略编号">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.tariffId"
              :content="scope.row.tariffId"
              placement="top"
              trigger="hover"
            >
              <span slot="reference" style="cursor:pointer">{{ scope.row.tariffId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="资费策略名称">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.name"
              :content="scope.row.name"
              placement="top"
              trigger="hover"
            >
              <span slot="reference" style="cursor:pointer">{{ scope.row.name }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="价格">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.price"
              :content="scope.row.price"
              placement="top"
              trigger="hover"
            >
              <span slot="reference" style="cursor:pointer">{{ scope.row.price }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="计费周期">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.cycle"
              :content="scope.row.cycle"
              placement="top"
              trigger="hover"
            >
              <span slot="reference" style="cursor:pointer">{{ scope.row.cycle }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="计费方式">
          <template slot-scope="scope">{{ scope.row.mode }}</template>
        </el-table-column>
        <el-table-column label="是否自动续订">
          <template slot-scope="scope">{{ scope.row.isGoon }}</template>
        </el-table-column>
        <el-table-column label="退订锁定期">
          <template slot-scope="scope">{{ scope.row.lockPeriod }}</template>
        </el-table-column>
        <el-table-column label="计费渠道">
          <template slot-scope="scope">{{ scope.row.billingChannelName }}</template>
        </el-table-column>
        <el-table-column label="资费策略排序">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sequence" :disabled="judgeStatus" size="mini" placeholder="输入序号" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              v-show="!judgeStatus"
              type="danger"
              plain
              size="mini"
              round
              icon="el-icon-third-tongyong"
              @click="cancelConnect(scope.$index)"
            >取消关联</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tariffList: {
      type: Array,
      default: () => []
    },
    judgeStatus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tariffListNew: []
    }
  },
  watch: {
    tariffList(val) {
      this.tariffListNew = this.tariffList
    }
  },
  methods: {
    cancelConnect(index) {
      this.$confirm('确认取消关联吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.tariffListNew.splice(index, 1)
          this.$message({
            type: 'success',
            message: '取消成功!'
          })
        })
        .catch(() => {
          console.log('取消')
        })
    },
    // 添加资费策略
    addPay() {
      this.$emit('openPxpenses', this.tariffListNew)
    }
  }
}
</script>

<style>
.tariffList {
  margin: 5px 0 19px 0;
  font-weight: bold;
}
.app-table {
  margin-bottom: 50px;
}
</style>
